<template>
    <div class="">
        <div class="pr10">
            <div class="analyItem">
                <p class="analyItemTit tx-center">状态</p>
                <div class="analyItemCon">
                    <p class="col-md-6" v-if="capital.needDeposit>capital.deposit">
                        <span class="cRed pr8">押金({{(capital.needDeposit-capital.deposit)}})</span>
                    </p>
                    <p class="col-md-4">
                        <span class="cLightGray pr8">产值</span>
                        <span :class="capital.outputType=='高产'?'cGreen':(capital.outputType=='中产'?'cgreen':'cRed')">{{capital.outputType}}</span>
                    </p>
                           <p class="fl">
                    <span class="circlemark circlemark-green" v-if="capital.outputType=='高产'" >优</span>
                        <span class="circlemark circlemark-lightGreen" v-else-if="capital.outputType=='中产'" >良</span>
                        <span class="circlemark circlemark-lightRed" v-else>差</span>
                    </p>
                    <div class="fixedTrangle">
                        <span href="javascript:" class="fixedtips">
                            </span>
                             <div class="fixedtipscon pt10 pb10">
                                        <i>
                                        </i>
                                    <div>
                                        <div>
                                            <p>高产===优</p>
                                            <p>中产===良</p>
                                            <p>低产===差</p>
                                        </div>
                                  </div>
                            </div>
                    </div>
                    <!-- <p class="col-md-2">
                        <span class="state_pai1 cRednew">派</span>
                        <span class="state_wei1 cRednew">未</span>
                    </p> -->
                </div>
            </div>
        </div>

        <div class="thinScroll pr10" v-scrollHeight="85">
            <router-link tag="div" :to="{path:routerPath('capitalCapitalDetail1'), query:{processList:processList}}" class="analyItem anItemBor" active-class="anItemBor-active">
                <p class="analyItemTit tx-center">过程</p>
                <div class="analyItemCon">
                    <p class="col-md-6">
                        <span class="cLightGray pr8">可用余额</span>
                        <span>{{processYCount |toFixed(2)}}</span>
                    </p>
                    <p class="col-md-4">
                        <span class="cLightGray pr8">待回款</span>
                        <span>{{processDCount |toFixed(2)}}</span>
                    </p>
                </div>
            </router-link>
            <router-link tag="div" :to="{path:routerPath('capitalCapitalDetail6'), query:{resultList:resultList}}" class="analyItem anItemBor" active-class="anItemBor-active">
                <p class="analyItemTit tx-center">结果</p>
                <div class="analyItemCon">
                    <p class="col-md-6">
                        <span class="cLightGray pr8">可结算</span>
                        <span>{{resultKJie |toFixed(2)}}</span>
                    </p>
                    <p class="col-md-4">
                        <span class="cLightGray pr8">待收尾款</span>
                        <span>{{resultDshou |toFixed(2)}}</span>
                    </p>
                </div>
            </router-link>
            <router-link tag="div" :to="routerPath('capitalCapitalDetail')" class="analyItem anItemBor" active-class="anItemBor-active">
                <p class="analyItemTit tx-center">奖罚</p>
                <div class="analyItemCon">
                    <div class="col-md-10">
                        <p class="col-md-4">
                            <span class="cLightGray pr8">财务待</span>
                            <span>{{capital.doingMoney}}</span>
                        </p>
                        <p class="col-md-4">
                            <span class="cLightGray pr8">人事待</span>
                            <span>{{capital.personMoney}}</span>
                        </p>
                        <p class="col-md-4">
                            <span class="cLightGray pr8">待执行</span>
                            <span>{{capital.waitToDo}}</span>
                        </p>
                        <p class="col-md-4">
                            <span class="cLightGray pr8">已执行</span>
                            <span>{{capital.didMoney}}</span>
                        </p>
                        <p class="col-md-4">
                            <span class="cLightGray pr8">金额 </span>
                            <span class="c666">{{capital.totalFineMoney}}</span>
                        </p>
                        <p class="col-md-4">
                            <span class="cLightGray pr8">次数</span>
                            <span class="c666">{{capital.totalFineNum}}</span>
                        </p>
                    </div>
                    <!-- <div class="col-md-2" style="margin-top:20px;">
                        <span class="state_pai1 cRednew">派</span>
                        <span class="state_wei1 cRednew">未</span>
                    </div> -->
                </div>
            </router-link>
            <router-link tag="div" :to="routerPath('capitalCapitalDetail7')" class="analyItem anItemBor" active-class="anItemBor-active">
                <p class="analyItemTit tx-center">质保金</p>
                <div class="analyItemCon">
                    <p class="col-md-6">
                        <span class="cLightGray pr8">待收</span>
                        <span class="cRed">0</span>
                    </p>
                    <p class="col-md-4">
                        <span class="cLightGray pr8">质保金</span>
                        <span class="cRed">0</span>
                    </p>
                </div>
            </router-link>
            <router-link tag="div" :to="{path:routerPath('capitalCapitalDetail2'), query:{data:capital}}" class="analyItem anItemBor" active-class="anItemBor-active">
                <p class="analyItemTit tx-center">押金</p>
                <div class="analyItemCon">
                    <p class="col-md-4">
                        <span class="cLightGray pr8">级别</span>
                        <span class="c666">{{capital.traditionLevel|toFixed(2)}}</span>
                    </p>
                    <p class="col-md-4">
                        <span class="cLightGray pr8">应缴押金</span>
                        <span class="c666">{{capital.needDeposit|toFixed(2)}}</span>
                    </p>
                    <p class="col-md-4">
                        <span class="cLightGray pr8">已缴押金</span>
                        <span class="c666">{{capital.deposit}}</span>
                    </p>
                </div>
            </router-link>
            <router-link tag="div" :to="routerPath('capitalCapitalDetail3')" class="analyItem anItemBor" active-class="anItemBor-active">
                <p class="analyItemTit tx-center">平台费</p>
                <div class="analyItemCon">
                    <p class="col-md-3">
                        <span class="cLightGray pr8">倒计时</span>
                        <span class="cRed">{{pmDepositDetail.daoTime}}</span>
                    </p>
                    <p class="col-md-3">
                        <span class="cLightGray pr8">平台费</span>
                        <span class="cRed">{{pmDepositDetail.pmDeposit}}</span>
                    </p>
                    <p class="col-md-3">
                        <span class="cLightGray pr8">开始时间</span>
                        <span class="cRed">{{pmDepositDetail.createTime}}</span>
                    </p>
                    <p class="col-md-3">
                        <span class="cLightGray pr8">结束时间</span>
                        <span class="cRed">{{pmDepositDetail.endTime}}</span>
                    </p>
                </div>
            </router-link>
            <router-link tag="div" :to="routerPath('capitalCapitalDetail4')" class="analyItem anItemBor" active-class="anItemBor-active">
                <p class="analyItemTit tx-center">历史</p>
                <div class="analyItemCon">
                    <p class="col-md-4">
                        <span class="cLightGray pr8" title="个人平均产值">个人</span>
                        <span class="c666">{{capital.avgOverMoney}}</span>
                    </p>
                    <p class="col-md-4">
                        <span class="cLightGray pr8" title="城市平均产值">城市</span>
                        <span class="c666">{{capital.cityAvgOverMoney}}</span>
                    </p>
                    <p class="col-md-4">
                        <span class="cLightGray pr8">产值</span>
                        <span :class="capital.outputType=='高产'?'cGreen':(capital.outputType=='中产'?'cgreen':'cRed')">{{capital.outputType}}</span>
                    </p>
                    <div class="fixedTrangle">
                        <span href="javascript:" class="fixedtips">
                            </span>
                             <div class="fixedtipscon pt10 pb10">
                                        <i>
                                        </i>
                                    <div>
                                        <div>
                                            <p>高产=超平均产值30%；</p>
                                            <p>低产=低于平均产值40%</p>
                                            <p>个人评价月产值~所在城市的平均月产值</p>
                                        </div>
                                  </div>
                            </div>
                    </div>
                </div>

            </router-link>
            <router-link tag="div" :to="routerPath('capitalCapitalDetail5')" class="analyItem anItemBor" active-class="anItemBor-active">
                <p class="analyItemTit tx-center">培训费</p>
                <div class="analyItemCon">
                    <p class="col-md-4">
                        <span class="cLightGray pr8">已付金额</span>
                        <span class="cRed">{{trainMoney.PayMoney}}</span>
                    </p>
                    <p class="col-md-4">
                        <span class="cLightGray pr8">未付金额</span>
                        <span class="cRed">{{trainMoney.NoPayMoney}}</span>
                    </p>
                </div>
            </router-link>
        </div>
        <div class="pr10">
            <router-link tag="div" :to="routerPath('')" class="analyItem" active-class="anItemBor-active">
                <p class="analyItemTit tx-center">综合</p>
                <div class="analyItemCon">
                </div>
            </router-link>
        </div>
    </div>
</template>
<script>
import {
    mapGetters
} from 'vuex'
import {
    GetByUIdFundInformation,
    selectAllCityAndCompany,
    getPmUserinfoProjectProcessbyUid,
    getPmUserinfoProjectResultbyUid,
    getPmUserinfoMoneyInfobyUid,
    findPmDepositDetail,
    projectWarrantyByUserID,
    GetPmUserTrainMoneyByUid
} from '../Resources/Api'
export default {
    data () {
        return {
            capital: {},
            region: '',
            processList: [],
            resultList: [],
            jf: {},
            pmDepositDetail: {},
            projectWarranty: {},
            trainMoney: {}
        }
    },
    created () {
        this.selectAllCityAndCompanyFn()
        this.PmUserinfoProjectProcessbyUid()
        this.PmUserTrainMoneyByUid()
    },
    methods: {
    // 路由跳转路径拼接
        routerPath (path) {
            return this.$route.matched[1].path + '/' + path
        },
        // 直接进行路由跳转路径
        routerPush (path) {
            this.$router.push(this.$route.matched[1].path + '/' + path)
        },
        PmUserTrainMoneyByUid () {
            let _this = this
            _this.trainMoney = {}
            GetPmUserTrainMoneyByUid({
                uid: this.leftInfo.uid
            }).then(results => {
                this.trainMoney = results.data.Body
            }).catch(err => {
                console.log(err)
            })
        },
        findPmDepositDetail () {
            let _this = this
            _this.pmDepositDetail = {}
            findPmDepositDetail({
                uid: this.leftInfo.uid
            }).then(result => {
                if (result.data.Body !== 100) {
                    _this.pmDepositDetail = result.data.Body
                } else {
                    _this.pmDepositDetail = {}
                }
            }).catch(err => {
                console.log(err)
            })
        },
        projectWarrantyByUserID () {
            let _this = this
            _this.projectWarranty = {}
            projectWarrantyByUserID({
                uid: this.leftInfo.uid
            }).then(result => {
                this.projectWarranty = result.data.Body
            }).catch(err => {
                console.log(err)
            })
        },
        getPmUserinfoMoneyInfobyUid () {
            let _this = this
            _this.resultList = []
            getPmUserinfoMoneyInfobyUid({
                uid: this.leftInfo.uid,
                area: _this.region
            }).then(result => {
                _this.jf = result.data.Body
            }).catch(err => {
                console.log(err)
            })
        },
        PmUserinfoProjectResultbyUid () {
            let _this = this
            _this.resultList = []
            getPmUserinfoProjectResultbyUid({
                uid: this.leftInfo.uid
            }).then(result => {
                if (result.data.StatusCode !== 100) {
                    _this.resultList = result.data.Body
                } else {
                    _this.resultList = []
                }
            }).catch(err => {
                console.log(err)
            })
        },
        PmUserinfoProjectProcessbyUid () {
            let _this = this
            _this.processList = []
            getPmUserinfoProjectProcessbyUid({
                uid: this.leftInfo.uid
            }).then(result => {
                if (result.data.StatusCode !== 100) {
                    _this.processList = result.data.Body
                } else {
                    _this.processList = []
                }
            }).catch(err => {
                console.log(err)
            })
        },
        // 查询指定人员资金板块奖罚数据
        GetByUIdFundInformationFn () {
            let _this = this
            _this.capital = {}
            GetByUIdFundInformation({
                uid: _this.leftInfo.uid,
                area: _this.region
            }).then(results => {
                _this.capital = results.data.Body
            }).catch(error => {
                console.log(error)
            })
        },
        // 通过分司ID去除相同等级地区
        selectAllCityAndCompanyFn () {
            let _this = this
            _this.region = ''
            selectAllCityAndCompany({
                companyId: _this.leftInfo.dq_id
            }).then(results => {
                for (let i = 0; i < results.data.length; i++) {
                    _this.region = _this.region + results.data[i].cpId + ','
                }
                _this.region = _this.region.substr(0, _this.region.length - 1)
                _this.GetByUIdFundInformationFn()
            }).catch(error => {
                console.log(error)
            })
        }
    },
    computed: {
        ...mapGetters(['leftInfo']),
        processDCount () {
            if (this.processList.length > 0) {
                return this.processList.map(startReady => startReady.returnMoney).reduce((acc, cur) => (parseFloat(cur) + acc), 0)
            } else {
                return 0
            }
        },
        processYCount () {
            if (this.processList.length > 0) {
                return this.processList.map(startReady => startReady.userfulMoney).reduce((acc, cur) => (parseFloat(cur) + acc), 0)
            } else {
                return 0
            }
        },
        resultKJie () {
            if (this.resultList.length > 0) {
                return this.resultList.map(startReady => startReady.SettlementMoney).reduce((acc, cur) => (parseFloat(cur) + acc), 0)
            } else {
                return 0
            }
        },
        resultDshou () {
            if (this.resultList.length > 0) {
                return this.resultList.map(startReady => startReady.endPayment).reduce((acc, cur) => (parseFloat(cur) + acc), 0)
            } else {
                return 0
            }
        }
    },

    watch: {
        leftInfo () {
            this.selectAllCityAndCompanyFn()
            this.PmUserinfoProjectProcessbyUid()
            this.PmUserTrainMoneyByUid()
        }
    }
}

</script>
<style>
.cRednew {
  background: red;
  padding: 2px;
  color: #fff;
}
</style>
